<template>
  <list
      v-model="searchParams"
      :headers="headers"
      isHasOperateColumn
      :searchUrl="data.searchUrl"
      ref="listRef"
  >
    <template #operateBtnsSlot>
      <v-button type="primary" @click="addBrand" v-permission="`btn.Brand.add`" text="新增品牌"/>
    </template>
    <template #operateSlot="scope">
      <v-button type="danger" @click="deleteHandle(scope.row)" text="删除"
                v-permission="`btn.User.remove`"/>
      <v-button type="primary" text="编辑" v-permission="`btn.Brand.update`" @click="editBrand(scope.row)"/>
    </template>
    <template #searchSlot>
      <v-input label="名字" v-model="searchParams.name"/>
      <v-input label="创建地点" v-model="searchParams.createLocation"/>
      <v-date-picker label="创建时间" type="year" v-model:dataValue="searchParams.createBrandTime" :isPicker="false"
                     format="YYYY"/>
    </template>
  </list>
</template>
<script lang="ts" setup>
import {reactive, ref, inject} from 'vue'
import router from "@/router";
import {deleteBrandApi} from "@/api/brand";

let $messageBox: any = inject('$messageBox')
let $message: any = inject('$message')

let searchParams = ref({
  name: '',
  createLocation: '',
  createBrandTime: ''
})
const listRef = ref()
const headers = reactive<TableHeader[]>([
  {
    prop: 'name',
    label: '名字'
  },
  {
    prop: 'logoName',
    label: '英文简称'
  },
  {
    prop: 'createBrandTime',
    label: '品牌创建时间'
  },
  {
    prop: 'createLocation',
    label: '创建地点'
  },
  {
    prop: 'description',
    label: '品牌描述',
    showOverflowTooltip: true,
    width: 300
  },
  {
    prop: 'createdTime',
    label: '创建时间'
  },
  {
    prop: 'updatedTime',
    label: '更新时间'
  },
])
const data = reactive({
  searchUrl: '/brand/list',
  isShowDrawer: false,
})

const deleteHandle = (row: any) => {
  $messageBox.confirm(
      `确定删除${row.name}这个品牌吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteBrandApi(row.id).then(res => {
      if (res.status === 0) {
        $message.success('删除成功')
        listRef.value.searchData()
      } else {
        $message.error('删除失败')
      }
    })
  })
}

const addBrand = () => {
  router.push('/product/addBrand')
}

const editBrand = (row) => {
  router.push({
    path: '/product/editBrand',
    query: {
      id: row.id
    }
  })
}

</script>
<style scoped lang="scss"></style>
